<template>
    <div style="background-color: #F9F9F9;width: 100%;height:100%;">
        <div style="width:795px; height: 50px;border:1px solid #e1e1e1;background-color: #fefefe;border-bottom:none;">
            <ul class="i-box-nav">
                <li class="">
                    <a class="j_tab-dynamic-all j_tab-item active" style="margin-left: -20px;color: #108ee9;"
                       data-type="statistics" title="团队统计">团队统计</a>
                </li>
            </ul>
        </div>

        <!--左上角=> 客户总数/商机总数/成交订单总数-->
        <div style="width:795px;height: 600px;overflow-y:scroll;border:1px solid #e1e1e1;background: #F5F5F5;">
            <div style="width: 232px; height: 200px;border: 1px solid #eaeaea;
            background-color: #fff;float: left;margin-left:15px; margin-top: 20px;">
                <div class="portal-totaluser-title">客户总数</div>
                <div class="j_totalUserNum">120</div>
                <div style="text-align: center;font-size: 14px;color: #999;margin-top:15px;">未激活人数：
                    <span class="j_invitedUserNum">12</span>人
                </div>
            </div>
            <div style="width: 232px; height: 200px;border: 1px solid #eaeaea;
            background-color: #fff;float: left;margin-left:25px; margin-top: 20px;">
                <div class="portal-totaluser-title">商机总数</div>
                <div class="j_totalUserNum">{{this.sysj}}</div>
            </div>
            <div style="width: 232px; height: 200px;border: 1px solid #eaeaea;
            background-color: #fff;float: left;margin-left:25px; margin-top: 20px;">
                <div class="portal-totaluser-title">成交订单总数</div>
                <div class="j_totalUserNum">{{this.sydd}}</div>
            </div>
<!--            左下角 本月前五销售排行榜-->
            <div class="portal-content" ref="bingz"></div>

            <!--左中间 本月各模块新建数量情况-->
            <div class="xinjianshul">
                <div class="portal-title">本月各模块新建数量情况</div>
                <div style="width: 100%;margin-bottom: 20px;">
                    <ul style="padding: 8px 10px;text-align: center;">
                        <li title="本月新增线索" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.byxs}}</div>
                            <span style="font-style: normal;display: block;">线索</span>
                        </li>
                        <li title="本月新增客户" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.bykh}}</div>
                            <span style="font-style: normal;display: block;">客户</span>
                        </li>
                        <li title="本月新增联系人" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.bylxr}}</div>
                            <span style="font-style: normal;display: block;">联系人</span>
                        </li>
                        <li title="本月新增商机" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.bysj}}</div>
                            <span style="font-style: normal;display: block;">商机</span>
                        </li>
                        <li title="本月新增竞争对手" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.byjzds}}</div>
                            <span style="font-style: normal;display: block;">竞争对手</span>
                        </li>
                        <li title="本月新增审批" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.byht}}</div>
                            <span style="font-style: normal;display: block;">合同</span>
                        </li>
                        <li title="本月新增订单" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.bydd}}</div>
                            <span style="font-style: normal;display: block;">订单</span>
                        </li>
                        <li title="本月新增产品" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.bycp}}</div>
                            <span style="font-style: normal;display: block;">产品</span>
                        </li>
                        <li title="本月新增日志" style="float: left;overflow: hidden;margin: 5px 0 0 0;
                        width: 90px;font-size: 12px;margin-top: 20px;">
                            <div class="i">{{this.byrz}}</div>
                            <span style="font-style: normal;display: block;">日志</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--右上角 =>日志-->
        <div style="width: 447px; height: 369px; border: 1px solid #ebeef5; background-color: #fff;float: right;margin-top: -654px;">
            <div style="padding: 10px;border-bottom: 1px solid #ebeef5;">
                <div style="display: flex; -webkit-box-pack: justify;justify-content: space-between;">
                    <span>
                        <i style="color: #00a0e9;margin-right: 10px;font-size: 23px;" class="el-icon-s-comment"></i>
                        日志
                    </span>
                    <span style="cursor: pointer;">
                        <i style="margin-right: 10px;font-size: 20px;" class="el-icon-refresh" @click="shuax"
                           ></i>
                    </span>
                </div>
            </div>
            <div style="padding: 20px 0 20px 20px; -webkit-box-flex: 1;flex: 1;overflow: hidden;">
                <div style="max-height: 290px;overflow-y: auto;padding: 5px 10px;"  v-loading="loading" element-loading-text="拼命加载中...">
                    <ul style="padding: 0;">
                        <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                            <div style="margin: 8px 10px 0 0;">
                                <span style="height: 32px; width: 32px; line-height: 32px;border-radius: 50%;display: inline-block;
                                    box-sizing: border-box; text-align: center; color: #fff; background: #c0c4cc;font-size: 14px;overflow: hidden;">
                                    谭
                                </span>
                            </div>
                            <div style="font-size: 14px;line-height: 24px;margin-top: -40px;margin-left: 55px;">
                                <div>
                                    <i data-v-40f037d6="" style="font-style: normal;font-weight: 700;">谭方圆</i>
                                </div>
                                <div data-v-40f037d6="" class="action">
                                    添加了名称为
                                    <span data-v-40f037d6="" style="cursor: pointer;color: #409eff;">5</span>
                                    的客户
                                </div>
                                <div data-v-40f037d6="" class="time" style="font-size: 12px; color: #999; line-height: 30px;">
                                    05月25日 14:43
                                </div>
                            </div>
                        </li>
                        <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                        <div style="margin: 8px 10px 0 0;">
                                <span style="height: 32px; width: 32px; line-height: 32px;border-radius: 50%;display: inline-block;
                                    box-sizing: border-box; text-align: center; color: #fff; background: #c0c4cc;font-size: 14px;overflow: hidden;">
                                    谭
                                </span>
                        </div>
                        <div style="font-size: 14px;line-height: 24px;margin-top: -40px;margin-left: 55px;">
                            <div>
                                <i data-v-40f037d6="" style="font-style: normal;font-weight: 700;">谭方圆</i>
                            </div>
                            <div data-v-40f037d6="" class="action">
                                添加了名称为
                                <span data-v-40f037d6="" style="cursor: pointer;color: #409eff;">5</span>
                                的客户
                            </div>
                            <div data-v-40f037d6="" class="time" style="font-size: 12px; color: #999; line-height: 30px;">
                                05月25日 14:43
                            </div>
                        </div>
                    </li>
                        <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                            <div style="margin: 8px 10px 0 0;">
                                <span style="height: 32px; width: 32px; line-height: 32px;border-radius: 50%;display: inline-block;
                                    box-sizing: border-box; text-align: center; color: #fff; background: #c0c4cc;font-size: 14px;overflow: hidden;">
                                    谭
                                </span>
                            </div>
                            <div style="font-size: 14px;line-height: 24px;margin-top: -40px;margin-left: 55px;">
                                <div>
                                    <i data-v-40f037d6="" style="font-style: normal;font-weight: 700;">谭方圆</i>
                                </div>
                                <div data-v-40f037d6="" class="action">
                                    添加了名称为
                                    <span data-v-40f037d6="" style="cursor: pointer;color: #409eff;">5</span>
                                    的客户
                                </div>
                                <div data-v-40f037d6="" class="time" style="font-size: 12px; color: #999; line-height: 30px;">
                                    05月25日 14:43
                                </div>
                            </div>
                        </li>
                        <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                            <div style="margin: 8px 10px 0 0;">
                                <span style="height: 32px; width: 32px; line-height: 32px;border-radius: 50%;display: inline-block;
                                    box-sizing: border-box; text-align: center; color: #fff; background: #c0c4cc;font-size: 14px;overflow: hidden;">
                                    谭
                                </span>
                            </div>
                            <div style="font-size: 14px;line-height: 24px;margin-top: -40px;margin-left: 55px;">
                                <div>
                                    <i data-v-40f037d6="" style="font-style: normal;font-weight: 700;">谭方圆</i>
                                </div>
                                <div data-v-40f037d6="" class="action">
                                    添加了名称为
                                    <span data-v-40f037d6="" style="cursor: pointer;color: #409eff;">5</span>
                                    的客户
                                </div>
                                <div data-v-40f037d6="" class="time" style="font-size: 12px; color: #999; line-height: 30px;">
                                    05月25日 14:43
                                </div>
                            </div>
                        </li>
                    </ul>
                    <p style="text-align: center; font-size: 12px;">没有更多了...</p>
                </div>
            </div>
        </div>

        <!--右下角 =>上月销售排行榜 -->
        <div style="width: 447px; height: 260px; border: 1px solid #ebeef5; background-color: #fff;float: right;margin-top: -264px;">
            <div class="portal-title" style="margin-bottom: 10px;">
                <i class="el-icon-s-data" style="font-size: 23px;color: #00a0e9;"></i>
                上月销售排行榜TOP 3</div>
            <div style="max-height: 290px;overflow-y: auto;padding: 5px 10px;">
                <ul style="padding: 0;">
                    <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                        <div style="font-size: 14px;line-height: 24px;margin-left: 55px; margin-top: 10px;margin-bottom: 10px;">
                            <div>
                                <i class="el-icon-trophy" style="float: left;margin-left: -35px;color:#FF5451; font-size: 20px;"></i>
                                <i style="font-style: normal;font-weight: 700;">谭方圆</i>
                                <span style="float: right;margin-right: 30px;">销售部 <span style="color:#FF5451;">TOP 1</span></span>
                            </div>
                        </div>
                    </li>
                    <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                        <div style="font-size: 14px;line-height: 24px;margin-left: 55px; margin-top: 10px;margin-bottom: 10px;">
                            <div>
                                <i class="el-icon-trophy" style="float: left;margin-left: -35px;color:#00C6A5; font-size: 20px;"></i>
                                <i data-v-40f037d6="" style="font-style: normal;font-weight: 700;">谭方圆</i>
                                <span style="float: right;margin-right: 30px;">销售部 <span style="color:#00C6A5;">TOP 2</span></span>
                            </div>
                        </div>
                    </li>
                    <li style="padding: 0;align-items: flex-start;border-bottom: 1px solid #e6e6e6;margin-top: 20px;">
                        <div style="font-size: 14px;line-height: 24px;margin-left: 55px; margin-top: 10px;margin-bottom: 10px;">
                            <div>
                                <i class="el-icon-trophy" style="float: left;margin-left: -35px;color:#FFD046; font-size: 20px;"></i>
                                <i style="font-style: normal;font-weight: 700;">谭方圆</i>
                                <span style="float: right;margin-right: 30px;">销售部 <span style="color:#FFD046;">TOP 3</span></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Homepage",
        data(){
            return{
                loading:false,
                sykh:0,
                sysj:0,
                sydd:0,
                byxs:0,
                bykh:0,
                bylxr:0,
                bysj:0,
                byjzds:0,
                byht:0,
                bydd:0,
                bycp:0,
                byrz:0,
            }
        },
        methods:{
            shuax(){
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                }, 2000);
            },
            sydindan(){
                this.$axios.post("http://localhost:8088/sy/sydd",this.vproform).then(v=>{
                    this.sydd=v.data
                }).catch(()=>{});
            },
            syshanji(){
                this.$axios.post("http://localhost:8088/sy/sysj",this.vproform).then(v=>{
                    this.sysj=v.data
                }).catch(()=>{});
            },
            xiansuo(){
                this.$axios.post("http://localhost:8088/sy/byxs",this.vproform).then(v=>{
                    this.byxs=v.data
                }).catch(()=>{});
            },
            kehu(){
                this.$axios.post("http://localhost:8088/sy/bykh",this.vproform).then(v=>{
                    this.bykh=v.data
                }).catch(()=>{});
            },
            lianxiren(){
                this.$axios.post("http://localhost:8088/sy/bylxr",this.vproform).then(v=>{
                    this.bylxr=v.data
                }).catch(()=>{});
            },
            sahngji(){
                this.$axios.post("http://localhost:8088/sy/bysj",this.vproform).then(v=>{
                    this.bysj=v.data
                }).catch(()=>{});
            },
            jinzhengdueishou(){
                this.$axios.post("http://localhost:8088/sy/byjzds",this.vproform).then(v=>{
                    this.byjzds=v.data
                }).catch(()=>{});
            },
            heton(){
                this.$axios.post("http://localhost:8088/sy/byht",this.vproform).then(v=>{
                    this.byht=v.data
                }).catch(()=>{});
            },
            dindan(){
                this.$axios.post("http://localhost:8088/sy/bydd",this.vproform).then(v=>{
                    this.bydd=v.data
                }).catch(()=>{});
            },
            chanpin(){
                this.$axios.post("http://localhost:8088/sy/bycp",this.vproform).then(v=>{
                    this.bycp=v.data
                }).catch(()=>{});
            },
            rzhi(){
                this.$axios.post("http://localhost:8088/sy/byrz",this.vproform).then(v=>{
                    this.byrz=v.data
                }).catch(()=>{});
            },
            brokenLine() {//柱状图
                let myChart = this.$echarts.init(this.$refs.bingz);
                myChart.setOption({
                    title: {
                        text: '本月销售排行榜TOP 5',
                        bottom: 10,
                        left: 'center',
                        top: 10,
                        textStyle: {
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false,
                            color: '#707070'
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 14,
                                color: '#4D4D4D'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#707070'
                            }
                        },
                        data: ['小小1', '小小2', '小小3', '小小4', '小小5'],
                    }],
                    yAxis: {
                        type: 'value',
                        name: '销售数量',
                        nameTextStyle: {
                            fontSize: 14,
                            color: '#4D4D4D'
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: '#4D4D4D'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#707070'
                            }
                        }
                    },
                    series: [{
                        name: '销售数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: [{
                            name: '小小1',
                            value: '70',
                            itemStyle: {
                                color: '#1F78B4'
                            }
                        },
                            {
                                name: '小小2',
                                value: '50',
                                itemStyle: {
                                    color: '#108ee9'
                                }
                            },
                            {
                                name: '小小3',
                                value: '30',
                                itemStyle: {
                                    color: '#A6CEE3'
                                }
                            },
                            {
                                name: '小小4',
                                value: '25',
                                itemStyle: {
                                    color: '#B2DF8A'
                                }
                            },
                            {
                                name: '小小5',
                                value: '15',
                                itemStyle: {
                                    color: '#33A02C'
                                }
                            }
                        ]
                    }]
                })
            },

        },
        created: function () {
            this.sydindan();
            this.syshanji();
            this.xiansuo();
            this.kehu();
            this.lianxiren();
            this.sahngji();
            //this.jinzhengdueishou();
            this.heton();
            this.dindan();
            //this.chanpin();
            //this.rzhi();
        },
        mounted() {
            this.brokenLine();
        }

    }
</script>

<style scoped>
    .i{
        color: #00a0e9;
        margin: 0 auto;
        height: 50px;
        width: 50px;
        line-height: 52px;
        font-weight: bold;
        border-style: solid;
        border-width: 1px;
        border-color: #d1d1d1;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
    }
    .i:hover{
        color: #FFFFFF;
        background-color: #00a0e9;
    }
    .portal-title{
        font-size: 18px;
        padding-left: 30px;
        padding-top: 20px;
    }
    .xinjianshul{
        width: 750px;
        height: 280px;
        border: 1px solid #eaeaea;
        background-color: #fff;
        margin-top: 15px;
        margin-left: 16px;
        margin-bottom: 30px;
    }
    .portal-content{
        width: 750px;
        height: 300px;
        border: 1px solid #eaeaea;
        background-color: #fff;
        margin-top: 238px;
        margin-left: 16px;
    }
    .portal-totaluser-title {
        margin-top: 50px;
        text-align: center;
        font-size: 18px;
        color: #666;
    }
    .j_totalUserNum {
        margin-top: 10px;
         text-align: center;
         font-size: 50px;
     }
    .i-box-head>* {
        display: inline-block;
        vertical-align: top;
    }
    .i-box-nav>li {
        float: left;
    }
    .i-box-head li>a {
         color: #999;
         font-size: 12px;
     }
    .i-box-nav>li>a {
        display: block;
        text-decoration: none;
        color: #999;
    }
    a {
        cursor: pointer;
        background: transparent;
        color: #108ee9;
        text-decoration: none;
    }
    ul, ol {
        list-style: none;
    }
</style>